import Taro, { Component } from '@tarojs/taro'
import { View, Input, Button, Text, Image } from '@tarojs/components'


import './login.less'
import eye from '../../assets/img/icon_01.png'
import eye_on from '../../assets/img/icon_01_on.png'


class RegisterStepTwo extends Component {
  constructor(props){
    super(props)
  }

  state = {
    currentEye: false,
    currentCenterEye: false,
    eyeImg: eye,
    eyeCenterImg: eye,
    focus: 'password',
    password: null,
    passwordCenter: null,
    invitationCode: null,
    isComplete: true,
    passwordType: 'password',
    passwordCenterType: 'password',
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({title: '新用户注册'})
  }

  // input聚焦
  inputFocus (type: string = 'password') {
    this.setState({
      focus: type
    })
  }

  toggleEye () {
    this.setState({
      currentEye: !this.state.currentEye
    }, () => {
      let  eyeImg = this.state.currentEye ? eye_on : eye
      let  passwordType = this.state.currentEye ? 'text' : 'password'
      this.setState({
        eyeImg,
        passwordType
      })
    })
  }

  toggleCenterEye () {
    this.setState({
      currentCenterEye: !this.state.currentCenterEye
    }, () => {
      let  eyeCenterImg = this.state.currentCenterEye ? eye_on : eye
      let  passwordCenterType = this.state.currentCenterEye ? 'text' : 'password'
      this.setState({
        eyeCenterImg,
        passwordCenterType
      })
    })
  }

  inputChange (type: string,e) {
    this.setState({
      [type]: e.target.value
    }, () => {
      let { password,passwordCenter } = this.state
      if(password && passwordCenter){
        this.setState({
          isComplete: false
        })
      }else {
        this.setState({
          isComplete: true
        })
      }
    })
  }

  render () {
    let { focus,eyeImg,eyeCenterImg,passwordType,passwordCenterType,isComplete } = this.state
    return (
      <View className='login-wrap'>
        <View>
          <View className={focus === 'password' ? 'input-group input-group-on' : 'input-group'}>
            <Text className='input-title'>密码</Text>
            <Input className='input'  placeholderClass='placeholder-class' placeholder='请输入登录密码' type={passwordType}
                   name='password'
                   onFocus={this.inputFocus.bind(this, 'password')}
                   onChange={this.inputChange.bind(this,'password')}
            />
            <Image className='eye' src={eyeImg} onClick={this.toggleEye.bind(this)} />
          </View>
          <View className={focus === 'passwordCenter' ? 'input-group input-group-on' : 'input-group'}>
            <Text className='input-title'>确认密码</Text>
            <Input className='input'  placeholderClass='placeholder-class' placeholder='请输入登录密码' type={passwordCenterType}
                   name='password'
                   onFocus={this.inputFocus.bind(this, 'passwordCenter')}
                   onChange={this.inputChange.bind(this,'passwordCenter')}
            />
            <Image className='eye' src={eyeCenterImg} onClick={this.toggleCenterEye.bind(this)} />
          </View>
          <View className={focus === 'invitationCode' ? 'input-group input-group-on' : 'input-group'}>
            <Text className='input-title'>邀请码</Text>
            <Input className='input'  placeholderClass='placeholder-class' placeholder='请输入邀请码(选填)' type='text'
                   name='invitationCode'
                   onFocus={this.inputFocus.bind(this, 'invitationCode')}
                   onChange={this.inputChange.bind(this,'invitationCode')}
            />
          </View>

          <Button className={isComplete ? 'btn-submit' : 'btn-submit  btn-submit-on'} type='default' disabled={isComplete}>免费注册</Button>
        </View>

        <View className='protocol'>
          注册即表示同意并阅读
          <Text className='protocol-text'>《建务通服务协议》</Text>
        </View>

      </View>
    )
  }
}

export default RegisterStepTwo
